<template>
	<view class="vehicle_container">
		<view class="mail_List">
			<view class="mail" style="font-weight: 700;">
				<view class="order">人行记录</view>
			</view>
		</view>
		<view class="icon">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
		<!-- 		<u-search :placeholder=placeholder v-model="deviceName" :show-action=false @change="search">
		</u-search> -->
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<view class="" style="display: flex;">
						<u-form-item label="小区:" :border-bottom="false">
							<u-input v-model="form.executor" type="select" :select-open="show3"
								:placeholder="newList3==''? '请选择小区': newList3" @click="show3 = true" />
						</u-form-item>
						<u-form-item label="时间:" :border-bottom="false">
							<u-input v-model="form.address" type="select" :select-open="show2"
								:placeholder="newList2==''? '请选择时间': newList2" @click="show2 = true" />
						</u-form-item>
					</view>
					<!-- 						<u-form-item label="选择区域:">
							<u-input v-model="form.executor" :type="newList3==''? 'select' : 'text'"
								:select-open="show3" placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList3==''? '请选择区域': newList3" @click="show3 = true" />
						</u-form-item>
						<u-form-item label="选择小区:">
							<u-input v-model="form.address" :type="newList2==''? 'select' : 'text'" :select-open="show2"
								placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList2==''? '请输入选择小区': newList2" @click="show2 = true" />
						</u-form-item> -->
				</u-form>
			</uni-card>
			<view class="" style="width: 97%;margin: 8rpx auto;">
				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;"
					v-for="(item,index) in particulars" :key='index' @click="owner(item)">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image :src="item.picUrl" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">{{item.userName}}</text>
								<!-- <text style="margin-left: 16rpx;color: #9acfff;">业主</text> -->
								<!-- <text style="margin-left: 16rpx;color: #a0e8b8;">租客</text> -->
								<text
									style="margin-left: 16rpx;color: #fbdfa0;">{{item.userType=='1'? '业主' : '租客'}}</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>{{item.communityName}}</text>
								<text style="margin-left: 34rpx;">{{item.discernTime}}</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view>
				<!-- 第二行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image
							src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b58f8c5494eef01ff5ac925be7fe9925bd317df0.jpg"
							mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">张德根</text>
								<text style="margin-left: 16rpx;color: #9acfff;">业主</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">07:42:30</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
				<!-- 第三行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft019b0714fcd8f8b811.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641520236&t=38d9735cebfdab7e38468636c1534753"
							mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">李锦凯</text>
								<text style="margin-left: 16rpx;color: #9acfff;">租客</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">07:56:30</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
				<!-- 第二行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image src="https://img1.baidu.com/it/u=555798463,4091644496&fm=26&fmt=auto" mode=""
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">王宇辰</text>
								<text style="margin-left: 16rpx;color: #9acfff;">业主</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">08:12:43</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
				<!-- 第三行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image
							src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=2eeff0d76509c93d07a706f3aa0dd4ea/4a36acaf2edda3cc9b2102f903e93901203f9226.jpg"
							mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">邓诗蓝</text>
								<text style="margin-left: 16rpx;color: #9acfff;">租客</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">08:33:20</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
				<!-- 第二行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fcdbf6c81800a19d89b0232b831fa828ba61e460d.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641520390&t=26a45b9f93ffdbc71b4817af7f8823bf"
							mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">郭博然</text>
								<text style="margin-left: 16rpx;color: #9acfff;">业主</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">08:43:25</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
				<!-- 第三行数据 -->
<!-- 				<view class=""
					style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;height: 176rpx;    margin: 22rpx auto;border-radius: 12rpx;box-shadow: 0 0 10rpx 2rpx #ccc;">
					<view class="" style="width: 15%;height: 82%;border-radius: 6rpx;overflow: hidden;">
						<image
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fbd315c6034a85edf3ce12f8a41540923dd54752e.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641520432&t=da2f81015b119f80bdb15cc4f2778354"
							mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="display: flex;justify-content: space-between;width: 72%;height: 82%;">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: space-around;width: 68%;height: 100%;">
							<view class="" style="">
								<text style="font-size: 34rpx;font-weight: 500;">钱怀云</text>
								<text style="margin-left: 16rpx;color: #9acfff;">租客</text>
							</view>
							<view class="" style="color: #c0c0c0;">
								<text>财富广场</text>
								<text style="margin-left: 34rpx;">09:00:41</text>
							</view>
						</view>
						<view class=""
							style="width: 20%;height: 100%;text-align: right;line-height: 141rpx;color: #2697ff; ">
							详情
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view>
			<uni-card class="second_card" style="margin: 0;">
				<u-cell-group :border="false" v-if="current==1" v-for="(item,index) in application" :key=index>
					<u-cell-item :arrow="false" :title="item.name" :value="item.createTime" @click="owner(item.id)">
					</u-cell-item>
					<!-- <u-cell-item :arrow="false" title="赵子龙" value="2021-06-16 11:32:12"></u-cell-item> -->
				</u-cell-group>
				<u-cell-group :border="false" v-if="current==2">
					<u-cell-item :arrow="false" :title="searchOwners.name" :value="searchOwners.createTime"
						@click="vehicleDetails(deviceName)"></u-cell-item>
				</u-cell-group>
			</uni-card>
		</view>
		<!-- 时间 -->
		<u-picker v-model="show2" mode="time" @confirm="confirm2"></u-picker>
		<!-- <u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select> -->
		<!-- 小区 -->
		<u-select v-model="show3" mode="single-column" :list="list3" @confirm="confirm3"></u-select>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				form: {
					// 关联异常
					type: '',
					type_two: '',
					// 选择小区
					executor: '',
					executor_two: '',
					// 选择时间
					address: '',
					address_two: '',
					// 选择楼宇
					building: '',
					building_two: '',
					// 选择单元
					unit: '',
					unit_two: '',
					// 选择房号
					number: '',
					number_two: '',
					title: '',
					describe: '',
					chargePerson: '',
					Maintenance: '',
					endTime: '',
					// 手机号码
					staffPhone: ''
				},
				placeholder: "请输入拜访人姓名",
				current: 1,
				// 所有展示数据
				application: '',
				// 搜索内容
				deviceName: '',
				// 搜索展示数据
				searchOwners: '',
				show2: false,
				show3: false,
				// 选择时间
				list2: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择小区
				list3: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择小区
				newList2: '',
				// 选择区域
				newList3: '',
				particulars: ''
			}
		},
		onLoad() {
			// 展示全部数据
			this.getRecords()
			// // // 展示全部列表数据
			// this.Approved()
			// // 选择小区
			// this.cellAddress()
		},
		methods: {
			// 展示小区数据
			getRecords() {
				this.loginId = uni.getStorageSync("setModel")
				this.$http.get('informationInquiry/selectCommunity', {
					deptId: this.loginId.deptId
				}).then(res => {
					let lists = res.data
					this.list3 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 展示全部列表数据
			Approved() {
				this.$http.get('informationInquiry/communityIdLog', {
					communityId: this.form.executor_two,
					data: this.form.address_two
				}).then(res => {
					// console.log(res, '展示全部列表数据')
					this.particulars = res.data
				})
			},
			// 选择小区
			cellAddress() {
				this.$http.get('informationInquiry/selectCommunityByArea', {
					areaId: this.form.executor_two,
					communityType: '1',
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '选择小区')
					// this.particulars=res.data
					let lists = res.data
					this.list2 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			// 选择小区
			confirm3(e) {
				// console.log(e);
				this.form.executor = e[0].label
				this.form.executor_two = e[0].value
				if (this.form.executor_two != '' && this.form.address_two != '') {
					// // 展示全部列表数据
					this.Approved()
				}
				// 选择小区
				// this.cellAddress();
			},
			// 选择时间
			confirm2(e) {
				// console.log(e)
				// this.form.address = e[0].label
				// this.form.address_two = e[0].value
				this.form.address = `${e.year}-${e.month}-${e.day}`
				this.form.address_two = `${e.year}_${e.month}_${e.day}`
				if (this.form.executor_two != '' && this.form.address_two != '') {
					// // 展示全部列表数据
					this.Approved()
				}
			},
			// 所有数据点击跳转
			owner(val) {
				// console.log(val)
				uni.navigateTo({
					// <navigator :url="'/pages/base/baseEdit/baseEdit?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
					url: '/pagesA/application/humanRecords/visitorDetails/visitorDetails?item=' + JSON.stringify(
						val)
				});
			},
			// 搜索数据点击跳转
			vehicleDetails(value) {
				console.log(value)

				uni.navigateTo({
					url: `/pagesA/application/humanRecords/visitorDetails/visitorDetails?deviceName=${value}`
				});
			},
			changeKey(lists, key) {
				let newArr = [];
				lists.forEach((item) => {
					let newObj = {};
					for (var i = 0; i < key.length; i++) {
						newObj[key[i]] = item[Object.keys(item)[i]]
					}
					newArr.push(newObj);
				})
				return newArr;
			},
			// vehicleDetails() {
			// 	this.openUrl('/pagesA/application/humanRecords/visitorDetails/visitorDetails')
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.vehicle_container {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		/deep/.u-search {
			margin: 30rpx 30rpx 0 30rpx !important;
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 14rpx 24rpx;
			}

			.uni-card__content {
				padding: 0 !important;
			}
		}

		/deep/.card {

			u-form-item {
				margin: 0 56rpx;

				.u-input {
					input {
						text-align: right !important;
					}

				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}
	}
</style>
